<template>
	<div class="info-content">
		<el-button type="primary" size="default" @click="add">+添加banner</el-button>
		<el-button type="warning" size="default" @click="doViewSort">调整顺序</el-button>

		<el-divider></el-divider>
		<div class="info_form" ref="fromDivRef">
			<el-form label-width="100px">
				<div v-for="(item, index) in list.data" :key="index" style="margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc">
					<div :class="[item.anim ? 'edit_anim' : '']">
						<div style="display: flex; justify-content: space-between; height: 50px; padding-right: 10px; align-items: center">
							<div style="font-weight: 500; font-size: 15px">#{{ index + 1 }}</div>
							<el-button type="danger" size="small" @click="del(item, index)">删除</el-button>
						</div>
						<div>
							<el-form-item label="banner标题：">
								<el-input v-model="item.title"></el-input>
							</el-form-item>

							<el-form-item label="banner图片：">
								<UploadBuild :file-code="'IMG'" :index="index" :fileUrl="item.url" @handleAvatarSuccess="handleAvatarSuccess"></UploadBuild>
							</el-form-item>

							<comOption :data="item" :index="index" @change="actionChange"></comOption>
						</div>
					</div>
				</div>
			</el-form>
		</div>

		<el-button class="btn" @click="submit">
			<el-icon class="el-icon--right"><ArrowLeft /></el-icon>
			生成预览</el-button
		>
	</div>
</template>

<script setup lang="ts" name="infoForm">
import { ElMessage } from 'element-plus';
import { ref, watch, onBeforeMount, nextTick, getCurrentInstance } from 'vue';
import UploadBuild from '/@/components/upload/index.vue';
import comOption from '/@/components/comOption/index.vue';
import { scorllBottom } from '/@/utils/utils.ts';

const list = ref({});

const props = defineProps({
	// 列表内容
	data: {
		type: Object,
		default: () => {},
	},
	isRight: {
		type: Boolean,
		default: () => false,
	},
});
const fromDivRef = ref();

watch(
	() => props.data,
	(val) => {
		if (val) {
			list.value = JSON.parse(JSON.stringify(props.data));
		}
	}
);

function del(item: any, index: number) {
	list.value.data.splice(index, 1);
}

function add() {
	list.value.data.push({
		anim: true,
	});

	scorllBottom(fromDivRef.value);
}

onBeforeMount(() => {
	list.value = JSON.parse(JSON.stringify(props.data));
});

function handleAvatarSuccess({ url, index }) {
	list.value.data[index].url = url;
}

function doViewSort() {
	let sortArr = [];

	list.value.data.forEach((item) => {
		Object.assign(item, {
			sortImg: item.url,
			sortName: item.title,
			...item,
		});
	});
	emit('openSort', list.value);
}

function actionChange(actionData) {
	list.value.data[actionData.index] = {
		...list.value.data[actionData.index],
		...actionData.action,
	};

	emit('submit', list.value);
}

const emit = defineEmits(['submit']);
function submit() {
	emit('submit', list.value);
}
</script>

<style lang="scss" scoped>
.info-content {
	padding: 20px;
	background-color: #fff;
}

.btn {
	width: 100%;
	margin-left: 0;
}

.info_form {
	overflow-y: scroll;
	overflow-x: hidden;
	height: 55vh;
}
</style>
